<template>
  <!-- <div class="title-bar mt10">商品变体</div> -->
  <a-space>
    <span>售价方式：</span>
    <a-radio-group v-model="salePriceForm.priceType" v-if="!isDetailInfo">
      <a-radio value="disable">一口价</a-radio>
      <a-radio value="override">阶梯价</a-radio>
    </a-radio-group>
    <div v-else>{{ salePriceForm.priceType == 'disable' ? '一口价' : '阶梯价' }}</div>
  </a-space>
  <div v-if="salePriceForm.priceType === 'disable'">
    <div class="mt10">
      <a-space>
        <span :class="[isDetailInfo ? '' : 'required']">起订量:</span>
        <a-input-number v-model="salePriceForm.num" hide-button placeholder="起订量为必传" v-if="!isDetailInfo" />
        <div v-else>{{ salePriceForm.num }}</div>
      </a-space>
    </div>
    <div class="mt5">
      <a-space v-if="!isDetailInfo">
        <span>促销计划(0时区)</span>
        <a-range-picker v-model="salePriceForm.salePlanTime" show-time :timePickerProps="{ hideDisabledOptions: true }" :disabledDate="(current:number) => dayjs(current).isBefore((dayjs().valueOf())-(24*60*60*1000))" />
        <span class="common-text">如果设置了则在计划时间内按促销价格销售，过来这个时间就按常规价格销售。</span>
      </a-space>
      <div v-else>
        <span>促销计划(0时区)：</span>
        {{ salePriceForm.salePlanTime.join('~') }}
      </div>
    </div>
  </div>
  <div v-if="salePriceForm.priceType === 'override'" style="width: 600px">
    <a-table :data="salePriceForm.priceList" :pagination="false" size="mini" class="table-single-line" :scroll="{ x: '200px', y: 200 }">
      <template #columns>
        <a-table-column title="数量" #cell="{ record }">
          <a-space v-if="!isDetailInfo">
            <a-input v-model="record.startNum" hide-button />
            <span>~</span>
            <a-input :min="record.startNum" v-model="record.endNum" hide-button />
          </a-space>
          <div v-else>
            <span>{{ record.startNum }}~{{ record.endNum }}</span>
          </div>
        </a-table-column>
        <a-table-column title="售价(USD)" #cell="{ record }">
          <a-input v-if="!isDetailInfo" v-model="record.price" hide-button />
          <div v-else>{{ record.price }}</div>
        </a-table-column>
        <a-table-column title="操作" #cell="{ record, rowIndex }" :width="80" v-if="!isDetailInfo">
          <icon-plus-circle class="cursor fs20" @click="add" />
          <icon-minus-circle class="cursor fs20 ml5" v-if="rowIndex > 0" @click="salePriceForm.priceList.splice(rowIndex, 1)" />
        </a-table-column>
      </template>
    </a-table>
  </div>

  <div class="mt10">
    <a-space v-if="!isDetailInfo">
      <a-button class="gray-outline" @click="attrToCreateVariant">按属性生成变体</a-button>
      <a-button class="gray-outline" @click="batchDel">批量移除 </a-button>
    </a-space>
    <a-table size="mini" :data="pageDataList" :bordered="{ cell: true }" row-key="customIndex" :row-selection="{ type: 'checkbox', showCheckedAll: true }" v-model:selected-keys="ids" class="table-single-line mt5" :pagination="false" :scroll="{ x: '100%', y: 400 }">
      <template #columns>
        <a-table-column title="ID" #cell="{ record }" :width="60">{{ record.id }}</a-table-column>
        <a-table-column title="变体属性" :width="80">
          <a-table-column align="center" #cell="{ record }" v-for="(item, index) of autoCreateTableTitle" :key="index" :title="item.name" :width="140">
            <a-select v-if="!isDetailInfo" placeholder="请选择" allow-search v-model="record.attributes.find((e:any) => e.name == item.name).option">
              <a-option v-for="(item,index) of record.attributes.find((e:any) => e.name == item.name).options" :key="index">{{ item }}</a-option>
            </a-select>
            <div v-else>{{ record.attributes.find((e: any) => e.name == item.name).option }}</div>
          </a-table-column>
        </a-table-column>
        <a-table-column title="图片" #cell="{ record, rowIndex }" :width="100">
          <a-space>
            <div v-if="!isDetailInfo">
              <!-- <icon-upload /> -->

              <a-popover v-if="props.picList[0]">
                <a-upload class="fl" multiple :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="(file) => beforeUplaod(file, record)">
                  <template #upload-button v-if="record.image.src">
                    <img :src="record.image.src" alt="" style="width: 40px; height: 40px" />
                  </template>
                </a-upload>
                <template #content>
                  <a-space>
                    <a-image @click="record.image.src = item.src" v-for="(item, index) of props.picList" :key="index" :preview="false" width="40" height="40" fit="cover" :src="getImgForHttp(item.src)" />
                  </a-space>
                </template>
              </a-popover>

              <a-upload v-else class="fl" multiple :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="(file) => beforeUplaod(file, record)">
                <template #upload-button v-if="record.image.src">
                  <img :src="record.image.src" alt="" style="width: 40px; height: 40px" />
                </template>
              </a-upload>
            </div>
            <ImgPopover v-else :src="record.image.src">
              <template #con>
                <a-image :preview="false" width="40" height="40" fit="contain" :src="record.image.src" />
              </template>
            </ImgPopover>
            <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('img', record, rowIndex)" v-if="!isDetailInfo">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>
        </a-table-column>
        <a-table-column :width="170">
          <template #title>
            <a-space style="line-height: 32px">
              <div :class="[!isDetailInfo ? 'required' : '']">库存SKU</div>
              <a-button type="text" @click="batchCreate" v-if="!isDetailInfo">批量生成SKU</a-button>
            </a-space>
          </template>

          <template #cell="{ record }">
            <a-input v-if="!isDetailInfo" v-model.trim="record.sku" placeholder="请输入" />
            <div v-else>{{ record.sku }}</div>
          </template>
        </a-table-column>
        <a-table-column title="重量(g)" #cell="{ record, rowIndex }" :width="160">
          <a-space>
            <a-input v-if="!isDetailInfo" :min="1" v-model="record.weight" placeholder="请输入" hide-button />
            <div v-else>{{ record.weight ? record.weight : '--' }}</div>
            <a-button v-if="!isDetailInfo" size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('weight', record, rowIndex)">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>
        </a-table-column>
        <a-table-column title="体积(cm)" #cell="{ record, rowIndex }" :width="260">
          <a-space v-if="!isDetailInfo">
            <a-input :min="1" v-model="record.dimensions.length" placeholder="长" hide-button />
            <a-input :min="1" v-model="record.dimensions.width" placeholder="宽" hide-button />
            <a-input :min="1" v-model="record.dimensions.height" placeholder="高" hide-button />
            <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('dimensions', record, rowIndex)">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>

          <a-space v-else>
            <div>{{ record.dimensions.length ? record.dimensions.length : '--' }}</div>
            <div>{{ record.dimensions.width ? record.dimensions.width : '--' }}</div>
            <div>{{ record.dimensions.height ? record.dimensions.height : '--' }}</div>
          </a-space>
        </a-table-column>
        <a-table-column v-if="salePriceForm.priceType === 'disable'" :width="160">
          <template #title>
            <div :class="[!isDetailInfo ? 'required' : '']">常规售价(USD)</div>
          </template>
          <template #cell="{ record, rowIndex }">
            <a-space>
              <a-input-number v-if="!isDetailInfo" :min="1" v-model="record.regular_price" placeholder="请输入" hide-button />
              <div v-else>{{ record.regular_price ? record.regular_price : '--' }}</div>
              <a-button v-if="!isDetailInfo" size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('regular_price', record, rowIndex)">
                <template #icon>
                  <icon-double-down />
                </template>
              </a-button>
            </a-space>
          </template>
        </a-table-column>
        <a-table-column v-if="salePriceForm.priceType === 'disable'" title="促销价格(USD)" #cell="{ record, rowIndex }" :width="160">
          <a-space>
            <a-input-number v-if="!isDetailInfo" :min="1" v-model="record.sale_price" placeholder="请输入" hide-button />
            <div v-else>{{ record.sale_price ? record.sale_price : '--' }}</div>
            <a-button v-if="!isDetailInfo" size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('sale_price', record, rowIndex)">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>
        </a-table-column>
        <a-table-column title="库存状态" #cell="{ record, rowIndex }" :width="160">
          <a-space>
            <a-select v-if="!isDetailInfo" style="width: 100px" v-model="record.stock_status" placeholder="请选择">
              <a-option value="instock"> 有货 </a-option>
              <a-option value="outofstock">无货</a-option>
              <a-option value="onbackorder">延迟交货</a-option>
            </a-select>

            <div v-else>{{ record.stock_status ? isStockMap[record.stock_status] : '--' }}</div>

            <a-button v-if="!isDetailInfo" size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('stock_status', record, rowIndex)">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>
        </a-table-column>
        <a-table-column title="描述" #cell="{ record, rowIndex }" :width="180">
          <a-space>
            <a-input v-if="!isDetailInfo" :min="1" v-model="record.description" placeholder="请输入" hide-button />
            <div v-else>{{ record.description ? record.description : '--' }}</div>
            <a-button v-if="!isDetailInfo" size="small" class="gray-outline" style="margin-left: 5px" @click="setPro('description', record, rowIndex)">
              <template #icon>
                <icon-double-down />
              </template>
            </a-button>
          </a-space>
        </a-table-column>
        <a-table-column title="操作" v-if="!isDetailInfo" fixed="right" #cell="{ record, rowIndex }" :width="60">
          <a-button type="text" @click="del(record, rowIndex)">移除</a-button>
        </a-table-column>
      </template>
    </a-table>

    <div class="pagination-footer mt5">
      <a-pagination size="mini" :page-size-options="[10, 20, 50, 100, 200, 500]" show-total show-page-size :total="autoCreateTableList.length" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>
  <batchCreateSku v-if="showBatchCreateSkuModal" v-model="showBatchCreateSkuModal" @save="saveToCreateSku" />
</template>

<script lang="ts" setup>
  import { watch, ref, computed } from 'vue'
  import { attributeRollPage } from '@/api/product'
  import { OSSUpload } from '@/utils/ossUpload'
  import { getArrayByArrays, arraysAreEqual, getImgForHttp } from '@/utils'
  import dayjs from 'dayjs'
  import _ from 'lodash-es'
  import { Message } from '@arco-design/web-vue'
  import batchCreateSku from './batchCreateSku.vue'
  import JsonView from '@/components/JsonView.vue'
  const props = defineProps(['attList', 'info', 'shopId', 'isInfo', 'picList'])
  // let priceType = ref('A')
  // let num = ref(10)

  const isDetailInfo = computed(() => {
    return props.isInfo
  })

  const isStockMap = {
    instock: '有货',
    outofstock: '有货',
    onbackorder: '有货',
  }

  let salePriceForm: any = ref({
    priceType: 'disable',
    num: 10,
    salePlanTime: [],
    priceList: [{ startNum: 1, endNum: 1, price: 0 }],
  })

  // let salePlanTime = ref([])
  // let priceList = ref([{ startNum: 1, endNum: 0, price: 0 }])
  let autoCreateTableList: any = ref([])

  // 变体进行分页
  let pageDataList = ref([])
  let pageNation = ref({ total: 100, pageNum: 1, pageSize: 10 })

  let autoCreateTableTitle: any = ref([])
  let ids = ref([])
  let delIds: any = ref([])
  let attrList = ref([])

  let oldVariantList: any = ref([]) //编辑的时候已经存在的变体数据
  let createVariantList: any = ref([]) //新生成的变体数据
  let showBatchCreateSkuModal = ref(false)

  const add = () => {
    let lastItem = salePriceForm.value.priceList[salePriceForm.value.priceList.length - 1]
    if (salePriceForm.value.priceList.length > 1 && lastItem.endNum < lastItem.startNum) {
      return Message.error('请输入正确的数量范围')
    }
    let obj = {
      startNum: parseInt(lastItem.endNum) + 1,
      endNum: 0,
      price: 0,
    }
    salePriceForm.value.priceList.push(obj)
  }

  const setList = async () => {
    let curList: any = []
    let arr = [...oldVariantList.value, ...createVariantList.value] || []
    if (!arr[0]) return
    // 循环遍历获取属性标题
    autoCreateTableTitle.value = _.cloneDeep(props.attList)

    // 将已存在的数据处理然后回填
    arr.forEach((e: any) => {
      let obj: any = _.cloneDeep(e)

      // 没有的属性直接添加一个

      let arrVariant: any = []
      autoCreateTableTitle.value.forEach((el: any) => {
        let index = obj.attributes.findIndex((item: any) => item.name === el.name)
        if (index == -1) {
          let obj1 = {
            id: el.id,
            name: el.name,
            options: [],
            position: -1,
            variation: null,
            visible: null,
          }
          arrVariant.push(obj1)
        } else {
          arrVariant.push(obj.attributes[index])
        }
      })
      obj.attributes = arrVariant

      // if (obj.attributes.length <= autoCreateTableTitle.value.length) {
      //   autoCreateTableTitle.value.forEach((el: any) => {
      //     let index = obj.attributes.findIndex((item: any) => item.name === el.name)
      //     if (index == -1) {
      //       let obj1 = {
      //         id: el.id,
      //         name: el.name,
      //         options: [],
      //         position: -1,
      //         variation: null,
      //         visible: null,
      //       }
      //       obj.attributes.push(obj1)
      //     }
      //   })
      // } else {
      //   let arr: any = []
      //   obj.attributes.forEach((el: any) => {
      //     let index = autoCreateTableTitle.value.findIndex((item: any) => item.name === el.name)
      //     if (index != -1) {
      //       arr.push(el)
      //     }
      //   })
      //   obj.attributes = arr
      // }
      //填充绑定数据
      obj.attributes.forEach((el: any) => {
        // 设置option()----------------------------------------------- start是否全部选择 暂定---------------------
        // let item: any = props.attList.find((item: any) => item.name === el.name)
        // if (item && el.options && el.options.length == 0) {
        //   el.options = item.options
        // }

        let item: any = attrList.value.find((item: any) => item.dataFromRestApi.name === el.name)
        // if (item && el.options && el.options.length == 0) {

        let arr = item.termList || []
        let optionArr = arr.slice(0, 100)
        el.options = optionArr.map((e: any) => e.dataFromRestApi.name)
        // --------------------------------------------------------------end-------------------------------------
      })
      // autoCreateTableList.value.push(obj)
      curList.push(obj)
    })

    // 当前数据的规格是否和新生成的数据数量对照，不对照直接清空
    // if (oldAutoCreateTitleList.length != autoCreateTableTitle.value.length) {
    //   autoCreateTableList.value = []
    // }
    if (autoCreateTableList.value.length == 0) {
      autoCreateTableList.value = curList
      autoCreateTableList.value.forEach((e: any, index: number) => {
        e.customIndex = `custom_${index}`
      })
    } else {
      let newArr: any = []
      // 对照进行比较，相同的不再添加getListset
      createVariantList.value.forEach((e: any) => {
        let index = autoCreateTableList.value.findIndex((item: any) => {
          let arr = e.attributes.map((el: any) => `${el.name}_${el.option}`).sort((a: any, b: any) => a - b)
          let arr1 = item.attributes.map((ell: any) => `${ell.name}_${ell.option}`).sort((a: any, b: any) => a - b)
          return arr.every((value: any, index: any) => value === arr1[index])
        })
        if (index == -1) newArr.push(e)
      })
      autoCreateTableList.value = [...autoCreateTableList.value, ...newArr]

      // 属性数据重新初始化一下
      autoCreateTableList.value.forEach((e: any, index: number) => {
        e.customIndex = `custom_${index}`
        let obj: any = e
        // 没有的属性直接添加一个
        let arrVariant: any = []
        autoCreateTableTitle.value.forEach((el: any) => {
          let index = obj.attributes?.findIndex((item: any) => item.name === el.name) || -1
          if (index == -1) {
            let obj1 = {
              id: el.id,
              name: el.name,
              options: [],
              position: -1,
              variation: null,
              visible: null,
            }
            arrVariant.push(obj1)
          } else {
            arrVariant.push(obj.attributes[index])
          }
        })
        obj.attributes = arrVariant

        //填充绑定数据
        obj.attributes.forEach((el: any) => {
          // 设置option()----------------------------------------------- start是否全部选择 暂定---------------------
          let item: any = attrList.value.find((item: any) => item.dataFromRestApi.name === el.name)
          // if (item && el.options && el.options.length == 0) {
          let arr = item?.termList || []
          let optionArr = arr.slice(0, 100)
          el.options = optionArr.map((e: any) => e.dataFromRestApi.name)
          // }
          // --------------------------------------------------------------end-------------------------------------
        })
      })
    }

    let newArr = autoCreateTableList.value.map((e: any) => {
      let sizeStr = ''
      e.attributes &&
        e.attributes.forEach((el: any) => {
          let flag = el.name.toLocaleUpperCase().indexOf('SIZE')
          if (flag != -1) sizeStr = el.option
        })
      e.zdpInitSizeStr = sizeStr
      return e
    })
    // 排序
    let sortFlag = newArr[0].zdpInitSizeStr

    if (sortFlag) autoCreateTableList.value = newArr.sort(sortByNumericValue)

    changeSizeToEditAttData()
  }

  function sortByNumericValue(a: any, b: any) {
    // 将字符串转换为浮点数
    const valueA = a.zdpInitSizeStr.match(/(\d+(\.\d+)?)/)[0]
    const valueB = b.zdpInitSizeStr.match(/(\d+(\.\d+)?)/)[0]
    // console.log(valueA, valueB)
    return valueA - valueB
  }

  const getList = async () => {
    const res: any = await attributeRollPage({ shopIdList: [props.shopId], pageSize: 999999 })
    attrList.value = res.data?.list || []
    console.log(attrList.value, '2222222')
  }

  const beforeUplaod = async (file: File, data: any) => {
    const res: any = await OSSUpload(file)
    data.image.src = res.url
  }

  const setPro = (type: string, data: any, index: number) => {
    autoCreateTableList.value.forEach((e: any, i: number) => {
      if (type == 'img') {
        if (i > index) {
          e.image.src = data.image.src
        }
      } else if (type == 'dimensions') {
        if (i > index) {
          e.dimensions = _.cloneDeep(data.dimensions)
        }
      } else {
        if (i > index) {
          e[type] = data[type]
        }
      }
    })
  }

  const del = (data: any, index: number) => {
    if (data.id) delIds.value.push(data.id)
    autoCreateTableList.value.splice(index, 1)
    changeSizeToEditAttData()
  }

  const batchCreate = () => {
    if (!autoCreateTableList.value[0]) return Message.error('请先生成变体')
    showBatchCreateSkuModal.value = true
  }

  const createSkuStr = (data: any, index: number, item: any) => {
    let firstText = data.firstSkuName
    if (data.secondType == 'A') {
      return `${firstText}-${index}`
    } else if (data.secondType == 'B') {
      return `${firstText}-${Math.floor(Math.random() * 1000 + 1000)}`
    } else {
      let arr = item.attributes.map((e: any) => e.option).filter((e: string) => e)
      return `${firstText}${arr.length > 0 ? '-' : ''}${arr.join('-')}-${index}`
    }
  }

  const saveToCreateSku = (data: any) => {
    autoCreateTableList.value.forEach((e: any, index: number) => {
      if (data.createType == 'A') {
        !e.sku ? (e.sku = createSkuStr(data, index, e)) : ''
      } else {
        e.sku = createSkuStr(data, index, e)
      }
    })
  }

  const batchDel = () => {
    if (!ids.value[0]) return Message.error('请选择要移除的数据')
    ids.value.forEach((e: any) => {
      let index = autoCreateTableList.value.findIndex((item: any) => item.customIndex === e)

      if (index != -1) {
        delIds.value.push(autoCreateTableList.value[index].id)
        autoCreateTableList.value.splice(index, 1)
      }
    })
    ids.value = []
    changeSizeToEditAttData()
  }

  const attrToCreateVariant = () => {
    let arr = _.cloneDeep(props.attList)

    // return
    let newArr: any = []
    let endArr: any = []

    arr.forEach((e: any) => {
      if (e.variation) {
        let itemArr: any = []
        e.options.forEach((el: any) => {
          let obj = {
            id: e.id,
            option: el,
            name: e.name,
            options: e.options,
          }
          // let item: any = attrList.value.find((e: any) => e.dataFromRestApi.name == obj.name)
          // obj.options = item?.termList?.map((e: any) => e.dataFromRestApi.name)
          itemArr.push(obj)
        })
        newArr.push(itemArr)
      }
    })
    // 属性相互组合形成变体
    let createArr = getArrayByArrays(newArr.filter((e: any) => e.length > 0))
    createArr.forEach((e: any) => {
      let obj = {
        attributes: e,
        image: { src: null },
        meta_data: [],
        sku: '',
        weight: '',
        description: '',
        regular_price: '',
        sale_price: '',
        dimensions: {
          height: '',
          length: '',
          width: '',
        },
      }

      endArr.push(obj)
    })
    createVariantList.value = endArr
    setList()
  }

  const showSalePriceData = (data: any) => {
    let meta_data = data.dataFromRestApi?.meta_data || []
    let typeData = meta_data.find((e: any) => e.key == 'wpcpq_enable') || {}

    if (typeData.value == 'override') {
      salePriceForm.value.priceType = 'override'
      let item = meta_data.find((e: any) => e.key == 'wpcpq_prices') || {}
      let list = JSON.parse(item.value)?.tiers || []
      if (list[0]) salePriceForm.value.priceList = []
      list.forEach((e: any) => {
        let obj = {
          startNum: e.quantity,
          endNum: e.endNum,
          price: e.price,
        }
        salePriceForm.value.priceList.push(obj)
      })
    } else {
      salePriceForm.value.priceType = 'disable'
      let item = meta_data.find((e: any) => e.key == 'min_quantity') || {}
      salePriceForm.value.num = parseInt(item.value) || 0
      // 获取字体的第一个选项
      let firstItem = data.variationList[0]?.dataFromRestApi || {}
      salePriceForm.value.salePlanTime = [firstItem?.date_on_sale_from || '', firstItem?.date_on_sale_to || '']
    }

    // let variantItem: any = autoCreateTableList.value[0]
    // let arr = autoCreateTableList.value[0].meta_data
    // let isFlagItem = arr.find((e: any) => e.key == 'wpcpq_enable')
    // if (isFlagItem) {
    //   // 阶梯价
    //   if (isFlagItem.value == 'override') {
    //     salePriceForm.value.priceType = 'override'
    //     let item = arr.find((e: any) => e.key == 'wpcpq_prices') || {}
    //     let list = JSON.parse(item.value)?.tiers || []
    //     if (list[0]) salePriceForm.value.priceList = []
    //     list.forEach((e: any) => {
    //       let obj = {
    //         startNum: e.quantity,
    //         endNum: e.endNum,
    //         price: e.price,
    //       }
    //       salePriceForm.value.priceList.push(obj)
    //     })
    //   } else {
    //     salePriceForm.value.priceType = 'disable'
    //     let item = arr.find((e: any) => e.key == 'min_quantity') || {}
    //     salePriceForm.value.num = parseInt(item.value) || 0
    //     salePriceForm.value.salePlanTime = [variantItem?.date_on_sale_from, variantItem?.date_on_sale_to]
    //   }
    // }
  }

  const sizeChange = (val: number) => {
    pageNation.value.pageNum = 1
    pageNation.value.pageSize = val
    changeSizeToEditAttData()
  }

  const changePage = (val: number) => {
    pageNation.value.pageNum = val
    changeSizeToEditAttData()
  }

  const changeSizeToEditAttData = () => {
    pageDataList.value = []
    let arr = autoCreateTableList.value.slice(pageNation.value.pageSize * (pageNation.value.pageNum - 1), pageNation.value.pageSize * pageNation.value.pageNum)
    pageDataList.value = arr
  }

  watch(
    () => props.info,
    async (val) => {
      await getList()
      //已存在的数据处理成新增的格式，用于给是数据统一
      let arr = val?.variationList || []
      let resultArr: any = []
      arr.forEach((e: any) => {
        let obj = { ...e.dataFromRestApi }
        resultArr.push(obj)
      })
      oldVariantList.value = resultArr || []
      setList()
      showSalePriceData(val)
    },
    {
      immediate: true,
    }
  )

  // onMounted(() => {
  //   getList()
  // })
  // 将数据暴漏到外面，用于保存
  defineExpose({ autoCreateTableList, delIds, salePriceForm })
</script>

<style lang="less" scoped>
  .fs20 {
    font-size: 20px;
  }

  :deep(.arco-upload-picture-card) {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
  :deep(.arco-upload-list-picture) {
    width: 40px;
    height: 40px;
  }
</style>
